iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0
自我挑戰組

CSS、JS-30天研究筆記系列 第 16

【day16】jQuery過濾器(即"過濾選取器")

  • 分享至 

  • xImage
  •  

過濾選取器:
類似CSS3的偽類選取器,可以讓不支援 CSS3 的低版本流覽器也能支援,並另外提供了很多獨有的篩檢程式。

一、 基本篩檢:

  • $('元素名:first') 選取第一個元素,返回單個元素;也可用first ()方法替代
  • $('元素名:last') 選取最後一個元素,返回單個元素;也可用last ()方法替代
  • $('元素名:not(.red)') 選取 class 不是 red 的 li 元素,返回元素集合;也可用not ()方法替代
  • $('元素名.even') 選擇索引(0 開始)是偶數的所有元素,返回元素集合
  • $('元素名:odd')選擇索引(0 開始)是奇數的所有元素,返回元素集合
  • $('元素名:eq(索引值)')選擇索引(0 開始)等於 index 的元素,返回單個元素;也可用eq ()方法替代
  • $('元素名:gt(索引值)')選擇索引(0 開始)大於 index 的元素,返回元素集合
  • $('元素名.lt(索引值)')選擇索引(0 開始)小於 index 的元素,返回元素集合
  • $('元素名:header')選擇標題元素,h1 ~ h6,返回元素集合
  • $(元素名':animated')選擇正在執行動畫的元素,返回元素集合
  • $('元素名:focus')選擇當前被焦點的元素,返回元素集合
    註::focus 篩檢程式,必須是網頁初始狀態下已經被觸發焦點的元素才能實現元素獲取。 而不是滑鼠點擊或者 Tab 鍵盤敲擊後才觸發。

二、 內容篩檢:
過濾規則主要是包含的子元素或文本內容上

  • $(':contains("字串")') 選取符合字串的元素,返回元素集合
  • $(':empty') 選取不包含子元素或空文本的元素,返回元素集合
  • $(' has()') 選取器選取所有包含一個或多個元素在其內的元素,匹配指定的選取器,返回元素集合;也可用has ()方法替代
  • $(':parent') 選取含有子元素或文本的元素,返回元素集合
  • 註:parent()是獲取當前元素的父元素;返回的是元素集合,不是選取含有子元素或文本 的元素,與$(':parent')選取器功能不同
  • 註:parents()選擇當前元素的父元素及父項目; parentsUntil('),獲得當前匹配元素集合中每個元素的父項目,直到(但不包括)被選取器、DOM 節點或 jQuery 物件匹配的元素
    三、 可見性篩檢:
    根據元素的可見性和不可見性來選擇相應的元素
  • $(':hidden') 選取所有不可見元素,返回元素集合
  • $(':visible') 選取所有可見元素,返回元素集合

四、 子元素篩檢:

  • $('元素:first-child') 獲取每個父元素的第一個子元素,返回元素集合
  • $(元素i:last-child') 獲取每個父元素的最後一個子元素,返回元素集合
  • $('元素:only-child') 獲取只有一個子元素的元素,返回元素集合
  • $('元素:nth-child(even/odd/數字n)') 獲取每個自訂子元素的元素(索引值從 1 開始計算),返回元素集合

五、 其他方法:

  • $(元素').is('匹配元素') 傳遞選取器、DOM、jquery 物件或是函數來匹配元素結合
  • $('元素').eq(2).hasClass('匹配元素') 其實就是 is("." + class),返回元素集合
  • $('元素').slice(起始位置,結束位置(不包含)) 選擇從 start 到 end 索引值(從0計算)位置的元素,如果是負數,則從後開始,返回元素集合
  • $('元素').filter('匹配元素')end() 將匹配元素集合縮減為匹配指定選取器的元素,返回元素集合(可放置function,用於複雜的選擇)
  • $('元素').find('匹配元素').end() 獲取當前元素前一次狀態,返回元素集合
  • $('元素').contents()獲取某元素下面所有元素節點,包括文本節點,如果是 iframe,則可以查找文本內容,返回元素集合

上一篇
【day15】JS選取元素的方法和JQ選取器
下一篇
【day17】Query選取器的容錯功能:
系列文
CSS、JS-30天研究筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言